<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东-吴俊美</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        } 
    a{
       text-decoration: none;
    }

    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }


    /* 顶部 */
    .top{
          width: 100%;
          height: 45px;
          background-color: #333;
          color: #fff;
          display: flex;
        }
        /* 8% 10% 57% 25% */
    .top li{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .top li:nth-child(1){
        width: 8%;
    } .top li:nth-child(1) img{
        width: 10px;
    }
    .top li:nth-child(2){
        width: 10%;
    }
    .top li:nth-child(2) img{
        width: 30px;
    }
    .top li:nth-child(3){
        width: 57%;
    }
    .top li:nth-child(4){
        width: 25%;
        background-color: #f63515;
    }

    /* 搜索框 */
    .sousuo-wrapper{
        width: 100%;
        height: 44px;
        background-color: red;
        color: #fff;
        display: flex;
        position: absolute;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .btn,.denglu{
        width: 40px;
        height: 44px;
    }
    .sousuo{
        flex: 1;
        height: 30px;
        background-color: #fff;
        border-radius: 15px;
    }
    .denglu{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn span{
        margin: 14px 0 0 15px;
        width: 20px;
        height: 18px;
        display: block;
        background: url(./image/搜索.png)no-repeat;
        background-size: 100% 100%;
    }
    .jd{
        width: 20px;
        height: 15px;
        background: url(./image/jdd.png)no-repeat;
        background-size: 20.5px;
        margin: 8px 8px 0 15px;
        position: relative;
        z-index: 1;
        float: left;
    }
    .fangdajing{
        width: 18px;
        height: 15px;
        background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=)no-repeat;
        background-position: -80px 0;
        background-size: 200px;
        margin: 8px 0 0 15px;
        position: relative;
        z-index: 1;
        float: left;
    }

    /* 大轮播图 */
    .swiper-container1 {
      width: 100%;
      justify-content: center;
      
    }
    .swiper-container1 .sousuo-wrapper{
        width: 100%;
    }
    .swiper-container1 img{
        width: 100%;
        height: 100%;
    }
    
    /* 导航栏 */
    .nav{
        width: 100%;
        height: 162px;
        text-align: center;
        background-color: #fff;
    }
    .nav li{
        width: 20%;
        height: 74px;
        float: left;
    }
    .nav li img{
        width: 40px;
    }
    .nav li span{
        display: block;
        color: black;
        font-size: 12px;
    }
  .sousuo .jd-header-icon-jd:after {
    content: "";
    position: absolute;
    border-right: 1px solid #ddd;
    top: 15px;
    left: 89px;
    height: 16px;
  }
  /* 
  .jd::after{
    content:""
  }
   */


.footer{
    position: absolute;
    width: 100%;
    height: 51px;
    display: flex;
    background-color: #fff;
    bottom: 0;

}
.footer li{
    width: 34%;
}
.footer li img{
    width: 67px;
}
    </style>
</head>
<body>
    <!-- 顶部 -->
    <ul class="top">
        <li><img src="./image/close.png" alt=""></li>
        <li><img src="./image/京东.png" alt=""></li>
        <li><span>打开京东App，购物更轻松</span></li>
        <li><span>立即打开</span></li>
    </ul>
    <!-- 搜索框 -->
    <div class="sousuo-wrapper">
    <!-- 左按钮 -->
    <div class="btn">
        <span></span>
    </div>
    <!-- 中搜索 -->
    <div class="sousuo">
        <!-- jd -->
        <div class="jd"></div>
        <i id="search-input-left-jd" class="jd-header-icon-jd">
            ::after  <!-- 伪类 -->
        </i>
        <!-- fangdajing -->
        <div class="fangdajing"></div>
    </div>
    <!-- 右登录 -->
    <div class="denglu">
        登录
    </div>
</div>


<!-- 大图片轮播图 -->
     <!-- Swiper -->
  <div class="swiper-container1">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./image/轮播图1.png" alt=""></div>
      <div class="swiper-slide"><img src="./image/轮播图2.png" alt=""></div>
      <div class="swiper-slide"><img src="./image/轮播图3.png" alt=""></div>
      <div class="swiper-slide"><img src="./image/轮播图4.png" alt=""></div>
      <div class="swiper-slide"><img src="./image/轮播图5.png" alt=""></div>
      <div class="swiper-slide"><img src="./image/轮播图6.png" alt=""></div>
      <div class="swiper-slide"><img src="./image/轮播图7.png" alt=""></div>
      <div class="swiper-slide"><img src="./image/轮播图8.png" alt=""></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination1"></div>
  </div>

  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container1', {
      spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
    delay: 1200,
    disableOnInteraction: false,
    },
      pagination: {
        el: '.swiper-pagination1',
        clickable: true,
      },
    });
  </script>
 
    

    <!-- 图片导航栏 -->
   <div>
        <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <ul class="nav">
            <li><a href="#"><img src="./image/超市.png" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
        </ul>
      </div>
      <div class="swiper-slide">
        <ul class="nav">
            <li><a href="#"><img src="./image/进口.png" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
            <li><a href="#"><img src="./image/timg.jpg" alt=""><span>京东页面</span></a></li>
        </ul>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- 底部导航条 -->
      <ul class="footer">
          <li><a href="#"><img src="./image/首页.png" alt=""></a></li>
          <li><a href="#"><img src="./image/分类.png" alt=""></a></li>
          <li><a href="#"><img src="./image/惊喜.png" alt=""></a></li>
          <li><a href="#"><img src="./image/购物车.png" alt=""></a></li>
          <li><a href="#"><img src="./image/未登录.png" alt=""></a></li>
      </ul>


  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
</body>
</html>